<template>
  <div>

<!--搜索-->
      <el-form :inline="true" :model="searchMap" class="demo-form-inline">
        <el-form-item label="活动名称">
          <el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="活动日期" >
        <el-date-picker type="date" placeholder="选择开始日期" v-model="searchMap.starttime1" ></el-date-picker>
        <el-date-picker type="date" placeholder="选择截止日期" v-model="searchMap.starttime_2" ></el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="fetchDate">查询</el-button>
        <el-button type="primary" @click="handleEdit('')">新增</el-button>
      </el-form>
      <!--搜索-->
<!--表单-->
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id"  label="活动ID"   ></el-table-column>
        <el-table-column prop="name"  label="活动名称"  ></el-table-column>
        <el-table-column prop="sponsor"  label="主办方"  ></el-table-column>
        <el-table-column prop="address"  label="活动地址"  ></el-table-column>
        <el-table-column prop="starttime"  label="开始时间"  ></el-table-column>
        <el-table-column prop="endtime"  label="结束时间"  ></el-table-column>

        <el-table-column fixed="right" label="操作"width="100">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)" type="text" size="small">
          修改
          </el-button>
        </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作"width="100">
          <template slot-scope="scope">
            <el-button @click="handledelete(scope.row.id)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>



<!--分页-->
      <el-pagination
        @size-change="fetchDate"
        @current-change="fetchDate"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
<!--窗体-->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
          </el-form-item>
          <el-form-item label="基本地址">
            <el-input v-model="pojo.address" placeholder="基本地址"></el-input>
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker type="date" v-model="pojo.starttime"
                            placeholder="开始日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="截至日期">
            <el-date-picker type="date" v-model="pojo.endtime"
                            placeholder="截至日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="报名截止">
            <el-date-picker type="date" v-model="pojo.enrolltime"
                            placeholder="报名截止"></el-date-picker>
          </el-form-item>
          <el-form-item label="活动详情">
            <el-input v-model="pojo.detail" placeholder="活动详情"
                      type="textarea" :rows="2"></el-input>
          </el-form-item>

          <el-form-item label="城市">
          <el-select v-model="pojo.city" placeholder="请选择">
          <el-option
          v-for="item in cityList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          </el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="是否可见">

            <!--<el-switch active-value="1" inactive-value="0" v-model="pojo.state"></el-switch>-->
            <el-switch
              v-model="pojo.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave()" >保存</el-button>
            <el-button @click="dialogFormVisible = false" >关闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  </div>
</template>
<script>
import gatheringApi from '@/api/gathering'
import cityApi from '@/api/city'

export default {
    data(){
        return {
            list:[],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            searchMap: {},
            pojo:{},//编辑实体
            cityList:[],
            id: '',//当前用户修改的id
            dialogFormVisible: false,

        }
    },
    created () {
        this.fetchDate();
        cityApi.getList().then(response =>{
          this.cityList = response.data
        })
    },
    methods: {
      fetchDate() {
        gatheringApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => {
          this.total = response.data.total
          this.list = response.data.rows
        })
      },
      handleSave() {

        gatheringApi.update(this.id, this.pojo).then(response => {
          if (response.flag) {
            this.fetchDate()
            this.$message({
              message: response.message,
              type: 'success'
            });
          } else {
            this.$message.error(response.message);
          }
        })
        this.dialogFormVisible = false
      },
      handleEdit(id) {
        this.dialogFormVisible = true
        this.id = id
        if (id != '') {
          gatheringApi.findById(id).then(response => {
            if (response.flag) {
              this.pojo = response.data
            }
          })
        } else {
          this.pojo = {};
        }
      },
      handledelete(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          gatheringApi.deleteById(id).then(reponse=>{
            if (reponse.flag){
              this.$message({
                type: 'success',
                message: reponse.message
              });
            }else{
              this.$message({
                type: 'error',
                message: reponse.message
              });

            }


          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    }
}
</script>

